<template>
  <div>
    <Row style="margin-top: 20px;">
      <Card shadow v-if='showRealTime'>
        <RealTime/>
      </Card>
      <Card shadow v-if='showHistory'>
        <HistoryPage/>
      </Card>
      <Card shadow v-if='showStatistics'>
        <DataStatistics/>
      </Card>
      <Card shadow v-if='showVideo'>
        <VideoMonitor/>
      </Card>
      <Card shadow v-if='showDataInterface'>
        <DataInterface/>
      </Card>
    </Row>
  </div>
</template>
<script>
import RealTime from '../detail-page/realTime.vue'
import HistoryPage from '../detail-page/historyPage.vue'
import DataStatistics from '../detail-page/dataStatistics.vue'
import VideoMonitor from '../detail-page/videoMonitor.vue'
import DataInterface from '../detail-page/dataInterface.vue'
export default {
  name: 'weatherStation4',
  components: {
    RealTime,
    HistoryPage,
    DataStatistics,
    VideoMonitor,
    DataInterface
  },
  data () {
    return {
      showRealTime: true,
      showHistory: false,
      showStatistics: false,
      showVideo: false,
      showDataInterface: false
    }
  },
    watch: {
    '$store.state.pageId': function () {
      var pageId = this.$store.state.pageId;
      this.showRealTime = false
      this.showHistory = false
      this.showStatistics = false
      this.showVideo = false
      this.showDataInterface = false
      if (pageId == '1') {
        this.showRealTime = true
      } else if (pageId == '2') {
        this.showHistory = true
      } else if (pageId == '3') {
        this.showStatistics = true
      } else if (pageId == '4') {
        this.showVideo = true
      } else {
        this.showDataInterface = true
      }
    }
  },
  mounted () {
    // console.log(this.$route.path)
    // console.log(this.$store.state.pageId)
    var pageId = this.$store.state.pageId;
    this.showRealTime = false
    this.showHistory = false
    this.showStatistics = false
    this.showVideo = false
    this.showDataInterface = false
    if (pageId == '1') {
      this.showRealTime = true
    } else if (pageId == '2') {
      this.showHistory = true
    } else if (pageId == '3') {
      this.showStatistics = true
    } else if (pageId == '4') {
      this.showVideo = true
    } else {
      this.showDataInterface = true
    }
  },
  method: {
    
  }
}
</script>
